<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别预警 - 多模态网络诈骗识别和预警系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧导航栏 -->
        <nav class="sidebar">
            <div class="logo">
                <h2>多模态网络诈骗识别和预警系统</h2>
            </div>
            <ul class="nav-links">
                <li><a href="text.html" class="nav-link">文字识别预警</a></li>
                <li><a href="audio.html" class="nav-link">语音识别预警</a></li>
                <li><a href="image.html" class="nav-link">图像识别预警</a></li>
                <li><a href="video.html" class="nav-link">视频识别预警</a></li>
            </ul>
        </nav>
        
        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="header-section">
                <h1>智能语音诈骗识别</h1>
                <p class="subtitle">基于深度学习的语音分析，为您提供精准的诈骗话术识别</p>
            </div>

            <div class="features-grid">
                <div class="feature-card">
                    <h3>语音转文字</h3>
                    <p>自动识别语音内容</p>
                </div>
                <div class="feature-card">
                    <h3>话术分析</h3>
                    <p>识别典型诈骗话术特征</p>
                </div>
                <div class="feature-card">
                    <h3>情感分析</h3>
                    <p>分析语音情感和语气特征</p>
                </div>
                <div class="feature-card">
                    <h3>实时预警</h3>
                    <p>快速识别可疑语音内容</p>
                </div>
            </div>

            <div class="analysis-section">
                <form class="upload-container" id="uploadForm" onsubmit="return false;">
                    <div class="input-group">
                        <label for="audioType">检测类型：</label>
                        <select id="audioType" class="select-style">
                            <option value="audio_media_detection">音视频媒体检测</option>
                            <option value="live_stream_detection">社交娱乐直播检测</option>
                        </select>
                    </div>
                    
                    <div class="record-controls" style="margin: 30px 0; text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px;">
                        <h3 style="margin-bottom: 15px; color: #2c3e50;">实时录音</h3>
                        <button type="button" class="btn record-btn" id="recordBtn">
                            <span class="record-icon">●</span> 开始录音
                        </button>
                        <span id="recordTime" style="margin-left: 10px; display: none; font-size: 18px; color: #666; font-weight: bold;">00:00</span>
                        <p style="margin-top: 10px; color: #666; font-size: 0.9em;">点击按钮开始录音，再次点击结束录音</p>
                    </div>
                    
                    <div class="upload-area" id="dropZone">
                        <input type="file" id="audioInput" accept="audio/*" style="display: none;">
                        <p>点击或拖拽音频文件到此处</p>
                        <p class="small">支持的格式：MP3, WAV, M4A</p>
                        <p class="small">单个文件大小限制：50MB</p>
                    </div>
                    
                    <div id="audioPreview" style="display: none; margin: 20px 0;">
                        <audio id="audioPlayer" controls style="width: 100%;"></audio>
                        <div class="audio-info" style="margin-top: 10px; color: #666;">
                            <span id="audioDuration">时长：--:--</span>
                            <span style="margin: 0 10px;">|</span>
                            <span id="audioSize">大小：-- MB</span>
                        </div>
                    </div>
                    
                    <button class="btn analyze-btn" type="button" id="analyzeBtn">开始分析</button>
                </form>

                <div class="result-container" id="resultArea">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h3>分析结果</h3>
                        <button class="btn" id="downloadBtn" style="display: none;" onclick="downloadResult()">
                            下载结果
                        </button>
                    </div>
                    <div id="analysisResult"></div>
                </div>
            </div>
        </main>
    </div>
    <script src="js/common.js"></script>
    <script src="js/audio.js"></script>
</body>
</html> 